<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <el-col :span="3">
        <div class="grid-content bg-purple">
            <el-tree :data="data" :props="defaultProps"   :default-expanded-keys="[0, 1]" @node-click="handleNodeClick"></el-tree>
        </div>
    </el-col>

    <el-col :span="21" >
        <div class="grid-content bg-purple">

            <el-form :inline="true" :model="query" class="demo-form-inline" size="mini" style="padding: 20px 0 15px 0;">
                <el-form-item label="用户姓名" >
                    <el-input v-model="query.name" placeholder="用户名称"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                            v-model="query.value"
                            type="daterange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <span style="padding: 0 20px 15px 0;float: right">

                    <el-button type="success"  size="mini" @click="addEmp" >添加用户</el-button>
                </span>
            </el-form>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="年龄">
                                <span>{{ props.row.age }}</span>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <span>{{ props.row.phone }}</span>
                            </el-form-item>
                            <el-form-item label="生日">
                                <span>{{ props.row.birthday }}</span>
                            </el-form-item>
                            <el-form-item label="身份证号">
                                <span>{{ props.row.idCard }}</span>
                            </el-form-item>
                            <el-form-item label="学位信息">
                                <span>{{ props.row.education }}</span>
                            </el-form-item>
                            <el-form-item label="专攻方向">
                                <span>{{ props.row.major }}</span>
                            </el-form-item>
                            <el-form-item label="详细信息">
                                <span style="width: 180%!important;">{{ props.row.introduction }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="hardUrl"
                        label="照片"
                        width="100px">
                    <template slot-scope="scope">
                        <img :src="scope.row.hardUrl" height="100px" width="75px"/>
                    </template>
                </el-table-column>
                <el-table-column
                        label="员工工号"
                        sortable
                        prop="account">
                </el-table-column>
                <el-table-column
                        label="员工名称"
                        sortable
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="就业状态"
                        sortable
                        width="180">
                    <template slot-scope="scope">
                        <el-tag type="warning" effect="dark" v-if="scope.row.status==0">在职</el-tag>
                        <el-tag type="info" effect="dark" v-if="scope.row.status==1">离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="联系方式"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="入职时间"
                        icon="el-icon-deleteel-icon-time"
                        prop="createTime">
                </el-table-column>
                <el-table-column
                        width="300px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   plain icon="el-icon-edit"
                                   scope.row.status==1?disabled:''
                                   size="mini"
                                   :disabled="(scope.row.status)==1?true:false"
                                   @click="editForm(scope.row)"></el-button>
                        <el-button type="danger"
                                   plain icon="el-icon-delete"
                                   size="mini"
                                   :disabled="(scope.row.status)==1?true:false"
                                   @click="delAdmin(scope.row)"></el-button>
                        <el-button type="text"
                                   icon="el-icon-magic-stick"
                                   size="mini"
                                   @click="open(scope.row)">重置密码</el-button>
                        <el-button type="text"
                                   icon="el-icon-magic-stick"
                                   size="mini"
                                   @click="showRoleDialog(scope.row.id)">分配角色</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--分页-->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="size"
                    layout="prev, pager, next, sizes, total, jumper"
                    :total="total">
            </el-pagination>

            <!--修改用户信息-->
            <el-drawer
                    :before-close="handleClose"
                    :visible.sync="dialog"
                    direction="ltr"
                    custom-class="demo-drawer"
                    ref="drawer">
                <div class="demo-drawer__content">
                    <el-form :model="form" size="mini">

                        <el-form-item :label-width="formLabelWidth">
                            <el-upload
                                    class="avatar-uploader"
                                    action="upload/sure"
                                    :show-file-list="false"
                                    style="padding-left: 20px"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="联系方式" :label-width="formLabelWidth">
                            <el-input v-model="form.phone" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="学位信息" :label-width="formLabelWidth">
                            <el-select v-model="form.education" placeholder="请选择学位信息">
                                <el-option v-for="edu in EduData" :label="edu.education" :value="edu.education"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专攻方向" :label-width="formLabelWidth">
                            <el-input v-model="form.major" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="科室" :label-width="formLabelWidth">
                            <div class="block">
                                <el-cascader
                                        v-model="value"
                                        :options="options"
                                        :show-all-levels="false"
                                        placeholder="快速搜索：指南"
                                        filterable
                                        clearable
                                        @change="handleChange"></el-cascader>
                            </div>
                        </el-form-item>
                        <el-form-item label="详细信息" :label-width="formLabelWidth">
                            <el-input type="textarea" autosize v-model="form.introduction" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="经历" :label-width="formLabelWidth">
                            <el-input type="textarea" autosize v-model="form.prize" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>

                    <div class="demo-drawer__footer">
                        <el-button @click="cancelForm">取 消</el-button>
                        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                    </div>
                </div>
            </el-drawer>

            <!--为用户分配角色-->
            <el-dialog
                    title="分配角色"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-checkbox-group v-model="checkRole">
                    <el-checkbox v-for="role in roles" :label="role.id+''" :key="role.id+''">{{role.rolename}}</el-checkbox>
                </el-checkbox-group>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editRole">确 定</el-button>
          </span>
            </el-dialog>

        </div>
    </el-col>
</div>


<script>
    new Vue({
        el: "#app",
        data: {
            data:[],    //多级部门科室数据
            one:{
                label: '医院全部人员',
                value:0,
                children: [],
            },
            tableData:[],//显示用户数据
            currentPage:1,
            size:3,
            total:3,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dialog: false,
            form:'',//修改表单
            formLabelWidth: '80px',
            timer: null,
            loading: false,
            EduData:[],
            imageUrl:'',
            query:{sid: 0,name:'',value:[]},
            dialogVisible:false,
            //选中的id值
            checkRole:[],
            //所有的角色
            roles:[],
            //员工id
            adminId:0,
            options: [],//联级数据
            value: [],  //联级查询获取的多级id--value

        },
        created() {
            this.initTable();
            this.queryByPage();
            this.initEdu();
        },
        methods: {

            handleChange(value) {
                this.form.sid = value[1];
            },

            //初始化科室
            initTable(){
                axios.post("/dept/CascaderList").then(resp=>{
                    this.one.children = resp.data.data;
                    this.options=resp.data.data;
                    this.data.push(this.one);
                });
            },

            //跳转到添加页面
            addEmp(){
                window.parent.iframeFunction('/addEmp.html','添加用户');
            },

            //初始化学历
            initEdu(){
                axios.get("/edu/list").then(resp=>{
                    this.EduData = resp.data.data;
                })
            },

            //修改
            editForm(row){
                this.value = [];
                this.dialog = true;
                this.form = row;
                this.imageUrl = row.hardUrl;
                for(let i = 0; i < this.options.length ; i++){
                    let aa = this.options[i];
                    for(let j = 0 ; j < aa.children.length;j++){
                        let bb = aa.children[j];
                        if(bb.value == row.sid){
                            this.value[0] = aa.value;
                            this.value[1] = bb.value;
                        }
                    }
                }
            },

            //删除一个员工 ----离职
            delAdmin(row){
                axios.get("/admin/delete?id="+row.id).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '离职成功',
                            type: 'success'
                        });
                        this.queryByPage(this.currentPage,this.size);
                    }else {
                        this.$message({
                            showClose: true,
                            message: '离职失败',
                            type: 'danger'
                        });
                    }
                })
            },

            //当选中孩子时查询数据并显示
            handleNodeClick(data) {
                if(data.children == null || data.value === 0){
                    this.query.sid = data.value;
                    this.queryByPage(this.currentPage,this.size);
                }
            },

            //重置密码
            open(row) {
                this.$confirm('是否要重置密码, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form = row;
                    this.form.password = 123456;
                    this.updateAdmin();
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //确认分配角色
            editRole(){
                axios.post("/role/editRole?adminId="+this.adminId+"&roleIds="+this.checkRole).then(resp=>{
                    this.$message.success("分配成功");
                    this.dialogVisible=false;
                })
            },

            //为用户分配角色
            showRoleDialog(adminId){
                this.adminId=adminId;
                this.dialogVisible=true;
                //1. 查询所有的角色
                //2.当前用户具有的角色id
                axios.get("/role/findAdminId?adminId="+this.adminId).then(resp=>{
                    this.roles=resp.data.data.list;
                    this.checkRole=resp.data.data.roleIds;
                })
            },

            //按照搜索条件查询
            onSubmit(){
                this.queryByPage(this.currentPage,this.size);
            },

            //分页查询数据
            queryByPage(currentPage,size){
                axios.post("/admin/list?currentPage="+this.currentPage+"&pageSize="+this.size,this.query).then(result=>{
                    if(result.data.code === 200){
                        this.tableData = result.data.data.list;
                        this.total = result.data.data.total;
                    }
                })
            },

            //绑定pageSize 改变的事件
            handleSizeChange(newsize){
                this.size = newsize;
                this.queryByPage(this.currentPage,this.size);
            },

            //绑定页面值 改变的事件
            handleCurrentChange(newPage){
                this.currentPage = newPage;
                this.queryByPage(this.currentPage, this.size);
            },

            //修改用户信息
            updateAdmin(form){
                if(this.imageUrl != null && this.imageUrl !== ''){
                    this.form.hardUrl = this.imageUrl;
                }
                axios.post("/admin/update",this.form).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.queryByPage(this.currentPage, this.size);
                    }
                })
            },

            //关闭表单
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要修改用户信息吗？')
                    .then(_ => {
                        this.loading = true;
                        this.updateAdmin();
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {});
            },

            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },


            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
    })
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .demo-drawer__content{
        padding-right: 20px;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

</body>
</html>